<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>切换图片</title>
        <script type="text/javascript">
            window.onload = function(){
                var prev = document.getElementById("prev");
                var next = document.getElementById("next");
                var img = document.getElementsByTagName("img")[0];
                var info = document.getElementsByTagName("p")[0];
                //将图片的src路径存储在数组中
                var imgArr = ["../image02/fcz1.jpg","../image02/fcz2.jpg",
                              "../image02/fcz3.jpg","../image02/fcz4.jpg",
                              "../image02/fcz5.jpg","../image02/fcz6.jpg",];
                //索引初始化为0
                var index = 0;
                //切换上一张，索引自减，数组的自减后的索引位置赋值给img路径
                prev.onclick = function(){
                    index--;
                    if(index < 0)
                        index = imgArr.length - 1;
                    img.src = imgArr[index];
                    info.innerText = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
                };
                //切换下一张,索引自增,数组的自增后的索引位置赋值给img路径
                next.onclick = function(){
                    index++;
                    if(index > imgArr.length - 1)
                        index = 0;
                    img.src = imgArr[index];    
                    info.innerText = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
                };
            };
        </script>

        <style type="text/css">
            *{
                list-style: none;
            }
            #outer{
                width: 200px;
                height: 400px;
                margin: 30px auto;
                padding: 10px;
                background-color: pink;
                text-align: center;
            }
            img{
                width: 200px;
                height: 300px;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <p id="info">一共6张图片，当前第1张</p>
            <img src="../image02/fcz1.jpg" alt="复仇者联盟">
            <button id="prev">上一张</button>
            <button id="next">下一张</button>
        </div>
    </body>
</html>